<template>

  <div>
    <!--    头部信息-->
    <div style="width: 100%;height: 65px;border-bottom: #2c3e50 1px solid ">
    <span style="float: left;margin-top: 10px;margin-left: 28px;font-size: 35px" @click="toreturn">
          &lt;
    </span>
      <span style="float: right;margin-top: 14px;margin-right: 150px;font-size: 25px;font-weight: bold">
          找附近
    </span>
    </div>

    <!--    附近-->
    <div style="width: 100%;height: 65px;">
      <div
          style="width: 137px;height: 65px;background: white;display: inline-block; text-align: center;line-height: 65px;"
          @click="toToilet" :style="{color:btnColor}">
        找厕所
      </div>
      <div
          style="width: 137px;height: 65px;background: white;display: inline-block;text-align: center;line-height: 65px;color: black"
          @click="charge" :style="{color:btnColor1}">
        找充电桩
      </div>
      <div
          style="width: 137px;height: 65px;background: white;display: inline-block;text-align: center;line-height: 65px;color: black"
          @click="Aftersalesservicepoint" :style="{color:btnColor2}">
        售后服务点
      </div>
    </div>
    <!--    下面-->
    <div style="position: absolute;width: 100%;height: 100px;background: white;margin-top: 680px;z-index: 999;">

      <div style="width: 330px;height: 100px;display: inline-block;overflow: hidden;">

        <div style="width: 60px;height: 90px;float: left">
          <img src="../../../assets/定位.png" style="height:50px; width:50px;margin-top: 10px"/>
        </div>
        <div style="width: 250px;height: 90px;float: left">
          <p style="
          text-align: left;
          font-size: 20px;
          margin-top: 18px;
          font-weight: bold;
           width: 250px;
           height: 28px;
           overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
">{{ name }}</p>
          <p style="text-align: left;margin-top: 7px;color: blue">{{ distance }}米</p>
        </div>

      </div>
      <div style="width: 53px;height: 100px;display: inline-block;overflow: hidden;">
        <img src="../../../assets/导航.png" style="width: 42px;height: 42px;margin-top: 11px"/>
        <span style="display: block">导航</span>
      </div>
    </div>
    <!--  <div id="container"></div>-->
    <div id="container" style="z-index: 1"></div>

    <!--    附近信息-->
    <!--        <div id="panel"></div>-->

    <!--    定位信息-->
    <!--    <div id='container'></div>-->
    <!--    <div class="info">-->
    <!--      <h4 id='status'></h4><hr>-->
    <!--      <p id='result'></p>-->
    <!--    </div>-->
  </div>
</template>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js">
</script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script>
// @zhaomingshuo

//简单集成高德地图
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",

  mounted() {

    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  data() {
    return {
      map: null,
      position: '',
      periphery: '厕所',
      btnColor: 'blue',
      btnColor1: 'initialColor',
      btnColor2: 'initialColor',
      locationList: null,
      name: null,
      distance: null,
    };
  },
  methods: {
    // 返回上一页
    toreturn() {
      this.$router.back(-1);
    },
    // 厕所
    toToilet() {
      this.periphery = "厕所";
      this.btnColor = 'blue';
      this.btnColor1 = 'black';
      this.btnColor2 = 'black';
      this.initAMap();
    },
    // 充电桩
    charge() {

      this.periphery = "充电";
      this.btnColor1 = 'blue';
      this.btnColor = 'black';
      this.btnColor2 = 'black';
      this.initAMap();
    },
    // 售后服务点
    Aftersalesservicepoint() {
      this.periphery = "汽车";
      this.btnColor2 = 'blue';
      this.btnColor1 = 'black';
      this.btnColor = 'black';
      this.initAMap();
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: this.$cod,
      };
      var self = this;
      AMapLoader.load({
        key: this.$key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
            var map = new AMap.Map('container', {
              resizeEnable: true,
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [116.397428, 39.90923], // 初始化地图中心点位置
            });
            // 定位
            AMap.plugin('AMap.Geolocation', function () {
              var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                needAddress: true,      //是否返回地址信息
              });
              map.addControl(geolocation);
              geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                  onComplete(result);
                } else {
                  onError(result)
                }
              });
            });

            //解析定位结果
            function onComplete(data) {
              console.log("定位成功!");
              // findalltext.position=data.position;
              self.position = data.position + "";
              console.log(self.position);
              console.log("定位结果:" + data.position);
              console.log("定位类别:" + data.location_type);
              console.log("精度:" + data.accuracy + "米");
              console.log("是否经过偏移:" + data.isConverted);
              // document.getElementById('status').innerHTML='定位成功'
              var str = [];
              str.push('定位结果：' + data.position);
              str.push('定位类别：' + data.location_type);
              if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
              }//如为IP精确定位结果则没有精度信息
              str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
              // this.position=str;
              // document.getElementById('result').innerHTML = str.join('<br>');
            }

            //解析定位错误信息
            function onError(data) {
              console.log("定位失败!")
              console.log("失败原因排查信息:" + data.message)
              // 定位失败
              // document.getElementById('status').innerHTML='定位失败'
              // document.getElementById('result').innerHTML = '失败原因排查信息:'+data.;message
            }

            setTimeout(item => {
              // TODO 找附近
              if (self.position != '') {
                AMap.plugin(["AMap.PlaceSearch"], function () {
                  //构造地点查询类
                  console.log(self.periphery, "搜索关键词");


                  var placeSearch = new AMap.PlaceSearch({

                    type: self.periphery, // 兴趣点类别
                    pageSize: 10, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    // city: "010", // 兴趣点城市
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    // panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                  });
                  console.log(self.position, "当前位置ip地址");


                  var startTranse = self.position.split(",");
                  //中心点坐标
                  var cpoint = [parseFloat(startTranse[0]), parseFloat(startTranse[1])];
                  console.log(cpoint);
                  // 为marker注册点击事件

                  placeSearch.searchNearBy('', cpoint, 9000, function (status, result) {

                    //  TODO 成功后
                    if (result.info === 'OK') {
                      console.log(result);
                      var locationList = result.poiList.pois; // 周边地标建筑列表
                      // console.log(result);


// 遍历位置列表，添加标记点并设置点击事件
//                       for (var i = 0; i < locationList.length; i++) {
//                         var poi = locationList[i];
//                         var lnglat = new AMap.LngLat(poi.location.lng, poi.location.lat);
//
//                         // 创建标记点
//                         var marker = new AMap.Marker({
//                           position: lnglat,
//                           map: map,
//                           title: poi.name, // 标记点标题，可以自定义为地点名称等
//                           extData: { poiData: poi } // 扩展数据，可以存储地点的详细信息
//                         });
//
//                         // 添加点击事件处理程序
//                         marker.on('click', function (e) {
//                           var clickedMarker = e.target; // 获取被点击的标记点对象
//                           var extData = clickedMarker.getExtData(); // 获取标记点的扩展数据
//                           var poiData = extData.poiData; // 获取地点的详细信息
//
//                           // 在这里处理点击标记点后的逻辑，例如获取详细数据
//                           console.log('点击了标记点', poiData);
//
//                           // 示例：弹出信息窗口显示详细信息
//                           var infoWindow = new AMap.InfoWindow({
//                             content: '名称：' + poiData.name + '<br>地址：' + poiData.address, // 根据实际需要展示的信息
//                             offset: new AMap.Pixel(0, -30) // 信息窗口偏移量
//                           });
//                           infoWindow.open(map, clickedMarker.getPosition()); // 在地图上打开信息窗口
//                         });
//                       }


                      /**
                       *  生成地址列表html
                       *  createLocationHtml(locationList)
                       * **/
                      // 获取返回的数据
                      self.locationList = locationList;
                      // 获取地点
                      self.name = locationList[0].name;
                      // 打印
                      console.log(locationList, "查询后的数据");
                      // 获取距离
                      AMap.plugin("AMap.Driving", function () {
                        var driving = new AMap.Driving({
                          policy: 0, //驾车路线规划策略，0是速度优先的策略
                        });
                        // 起始点坐标 cpoint
                        // var startLngLat = [116.379028, 39.865042]; //起始点坐标
                        var endLngLat = [locationList[0].location.lng, locationList[0].location.lat]; //终点坐标
                        // 选中的坐标
                        self.endLngLat = endLngLat;
                        console.log(cpoint, "起始位置")
                        console.log(endLngLat, "结束位置")
                        driving.search(cpoint, endLngLat, function (status, result) {
                          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                          //查询成功时，result 即为对应的驾车导航信息
                          // console.log(result)
                          if (result.info === 'OK') {
                            console.log("距离" + result.routes[0].distance + "米");
                            self.distance = result.routes[0].distance;
                          } else {
                            console.log('获取距离失败!');
                          }
                        });
                      });
                    } else {
                      console.log('获取位置信息失败!');
                    }
                    ;
                  });
                  // TODO 点击搜索结果对应的标记点的数据  给名称复制和终点坐标、算出起始坐标和重点坐标的距离
                  placeSearch.on('markerClick', (e) => {
                    // 根据点击marker进行下一步
                    console.log(e, "点击搜索结果对应的标记点的数据");

                    // 选中的名称
                    self.name = e.data.name;
                    // 获取距离
                    AMap.plugin("AMap.Driving", function () {
                      var driving = new AMap.Driving({
                        policy: 0, //驾车路线规划策略，0是速度优先的策略
                      });
                      // 起始点坐标 cpoint
                      // var startLngLat = [116.379028, 39.865042]; //起始点坐标
                      // cpoint  起始位置
                      var endLngLat = [e.data.location.lng, e.data.location.lat]; //终点坐标
                      // 选中的坐标
                      self.endLngLat = endLngLat;
                      console.log(cpoint, "起始位置")
                      console.log(endLngLat, "结束位置")
                      driving.search(cpoint, endLngLat, function (status, result) {
                        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                        //查询成功时，result 即为对应的驾车导航信息
                        // console.log(result)
                        if (result.info === 'OK') {
                          console.log("距离" + result.routes[0].distance + "米");
                          self.distance = result.routes[0].distance;
                        } else {
                          console.log('获取距离失败!');
                        }
                      });
                    });
                  });


                });
              }
            }, 500);

          })
          .catch((e) => {
            console.log(e);
          });
    },
  },
};
</script>


<style scoped>
#container {
  width: 100%;
  height: 698px;
}

.info {
  width: 26rem;
}

#panel {
  z-index: 999;
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}

* {
  margin: 0;
  padding: 0;

}
</style>
